<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="10">
        <a-card :bordered="false">
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <img :src="user.avator">
            </div>
            <div class="username">{{user.loginName}}</div>
            <div class="bio">{{user.autoGraph}}</div>
          </div>
          <div class="account-center-detail">
            <p>
              <span class="icon">
                <a-icon type="user" />
              </span>{{user.realName}}
            </p>
            <p>
              <span class="icon">
                <a-icon type="bank" />
              </span>{{user.occupationName}}
            </p>
            <p>
              <span class="icon">
                <a-icon type="phone" />
              </span>{{user.phone}}
            </p>
            <p>
              <span class="icon">
                <a-icon type="mail" />
              </span>{{user.email}}
            </p>
            <p>
              <span class="icon">
                <a-icon type="woman" />
              </span>{{user.sexName}}
            </p>
            <p>
              <span class="icon">
                <a-icon type="home" />
              </span>{{user.address}}
            </p>

            <p>
              <span class="icon">
                <a-icon type="tag" />
              </span>
              <a-tag class="cursor" v-for="(tag,index) in user.userRank || []" :key="index" :color="tag.rankColor">
                {{tag.rankName}}
              </a-tag>
            </p>

          </div>
          <a-divider/>

          <div class="account-center-tags">
            <div class="tagsTitle">个性标签</div>
            <div>
              <template v-for="(tag, index) in user.userLabel || []">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag
                      class="cursor"
                      :key="index"
                  >{{ `${tag.slice(0, 20)}...` }}</a-tag>
                </a-tooltip>
                <a-tag
                    v-else
                    class="cursor"
                    :key="index"
                >{{ tag }}</a-tag>
              </template>
            </div>
          </div>
          <a-divider :dashed="true"/>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="14">
        <a-card
            style="width:100%"
            :bordered="false"
            :tabList="tabListNoTitle"
            :activeTabKey="noTitleKey"
            @tabChange="key => handleTabChange(key, 'noTitleKey')"
        >
          <MyBlog :userId="$store.state.user.loginUser.userId" v-if="noTitleKey === 'blog'"></MyBlog>
          <MyResource :userId="$store.state.user.loginUser.userId" v-else-if="noTitleKey === 'resource'"></MyResource>
          <MyPk :userId="$store.state.user.loginUser.userId" v-else-if="noTitleKey === 'pk'"></MyPk>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getMyInfo } from '@/api/user'
import MyBlog from "@/components/myinfo/MyBlog";
import MyResource from "@/components/myinfo/MyResource";
import MyPk from "@/components/myinfo/MyPk";
export default {
  components: {MyPk,MyResource, MyBlog},
  data () {
    return {
      user:{},
      tagInputVisible: false,
      tagInputValue: '',
      tabListNoTitle: [
        {
          key: 'blog',
          tab: '博客'
        },
        {
          key: 'resource',
          tab: '资源'
        },
        {
          key: 'pk',
          tab: '竞技大PK'
        }
      ],
      noTitleKey: 'blog'
    }
  },
  mounted () {
    // 获取用户信息
    this.initgetMyInfo();
  },
  methods: {
    // 获得详细信息
    async initgetMyInfo(){
      const result = await getMyInfo();
      const { code,data,msg } = result;
      if (code === 200){
        this.user = data;
      } else {
        this.$message.error(msg);
      }
    },
    handleTabChange (key, type) {
      this[type] = key
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    & > .avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .account-center-detail {
    p {
      margin-bottom: 8px;
      position: relative;

      .icon{
        display: inline-block;
        margin-right: 5px;
      }
    }
  }

  .account-center-tags {
    .ant-tag {
      margin-bottom: 8px;
    }
  }

  .account-center-team {
    .members {
      a {
        display: block;
        margin: 12px 0;
        line-height: 24px;
        height: 24px;
        .member {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 24px;
          max-width: 100px;
          vertical-align: top;
          margin-left: 12px;
          transition: all 0.3s;
          display: inline-block;
        }
        &:hover {
          span {
            color: #1890ff;
          }
        }
      }
    }
  }

  .tagsTitle,
  .teamTitle {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
  }
}
</style>
